import React, { useState, useEffect } from "react";
import { View } from "@tarojs/components";
import { Button } from "@nutui/nutui-react-taro";
import {
  formConfig,
  QuestionConfig,
  CompositeField,
} from "../../config/formConfig";
import FormField from "../../components/FormField";
import "./index.scss";

const QuestionnaireIndex: React.FC = () => {
  const [formData, setFormData] = useState<Record<string, any>>({});
  const [activeTab, setActiveTab] = useState<number>(0);

  // Initialize form data with default values from config
  useEffect(() => {
    const initialFormData: Record<string, any> = {};

    formConfig.forEach((section) => {
      section.questions.forEach((question) => {
        // Set default value if available
        if (question.defaultValue !== undefined) {
          initialFormData[question.id] = question.defaultValue;
        }

        // Handle composite fields with default values
        if (question.type === "composite" && question.compositeFields) {
          if (!initialFormData[question.id]) {
            initialFormData[question.id] = {};
          }

          question.compositeFields.forEach((field) => {
            if (field.defaultValue !== undefined) {
              initialFormData[question.id][field.id] = field.defaultValue;
            }
          });
        }
      });
    });

    setFormData(initialFormData);
  }, []);

  const handleFieldChange = (id: string, value: any) => {
    setFormData((prev) => ({
      ...prev,
      [id]: value,
    }));
  };

  const handleSubmit = () => {
    // TODO: Implement form validation and submission
    console.log("Form data:", formData);
  };

  return (
    <View className="questionnaire">
      <View className="questionnaire__tabs">
        <View
          className={`questionnaire__tab ${activeTab === 0 ? "active" : ""}`}
          onClick={() => setActiveTab(0)}
        >
          关于本人
        </View>
        <View
          className={`questionnaire__tab ${activeTab === 1 ? "active" : ""}`}
          onClick={() => setActiveTab(1)}
        >
          关于期望对象
        </View>
        <View
          className="questionnaire__tab-indicator"
          style={{ transform: `translateX(${activeTab * 100}%)` }}
        />
      </View>

      <View className="questionnaire__content">
        <View
          className="questionnaire__content-slider"
          style={{
            transform: activeTab === 0 ? "translateX(0)" : "translateX(-50%)",
          }}
        >
          <View className="questionnaire__section-wrapper">
            <View className="questionnaire__section">
              <View className="questionnaire__section-title">关于本人</View>
              {formConfig[0].questions.map((question) => (
                <FormField
                  key={question.id}
                  config={question}
                  value={formData[question.id]}
                  onChange={(value) => handleFieldChange(question.id, value)}
                />
              ))}
            </View>
          </View>

          <View className="questionnaire__section-wrapper">
            <View className="questionnaire__section">
              <View className="questionnaire__section-title">关于期望对象</View>
              {formConfig[1].questions.map((question) => (
                <FormField
                  key={question.id}
                  config={question}
                  value={formData[question.id]}
                  onChange={(value) => handleFieldChange(question.id, value)}
                />
              ))}
            </View>
          </View>
        </View>
      </View>

      <View className="questionnaire__submit">
        <Button type="primary" block onClick={handleSubmit}>
          提交问卷
        </Button>
      </View>
    </View>

    // <View>问卷</View>
  );
};

export default QuestionnaireIndex;
